<template>
	<view class="box">
		<view class="hb">
			<view class="hb-bg">
				<image :src="info.img" mode="widthFix"></image>
			</view>
			<view class="hb-qrCode">
				<image :src="info.user_QR_code" mode=""></image>
			</view>
			<!-- <view class="hb-qrCode-tx">长按查看我的名片</view> -->
			<view class="hb-avatar">
				<image :src="info.head" mode=""></image>
			</view>
			<view class="hb-name">
				{{info.nickname}}
			</view>
			<view class="hb-c">
				{{value}}
			</view>
		</view>
		<view class="form">
			<view class="form-title form-title-sp">
				填写问候语
				<text @click="open">
					进入鼎圈问候词
				</text>
			</view>
			<view class="form-input textarea">
				<textarea placeholder="在这填写你的简介" placeholder-class="textarea-ac" v-model="value"
					@input="confirm" :cursor-spacing="85"></textarea>
			</view>
		</view>
		<view class="help" @click="toRule">
			<image :src="ossUrl +  '/static/image/wenhao.png'" mode=""></image>
			如何更有效的激活好友？
		</view>
		<view class="btns" @click="submit">下载</view>
		<!-- <image :src="img" mode="widthFix" class="painter-img"></image> -->
		<view class="painter">
			<l-painter :board="board" style="width: 100%;height: 100%;" ref="painterRef" />
		</view>
		<listVue @change="change" ref="listVueRef"/>
	</view>
</template>

<script>
	//1328/1625   750/917  690/844
	import listVue from './components/list.vue'
	export default {
		components:{
			listVue
		},
		data() {
			return {
				board: {},
				img: '',
				value: '',
				info: {}
			}
		},
		onLoad() {
			this.info = uni.getStorageSync('energyStation')
			
			this.value = this.info.content
			
			this.init()
		},
		methods: {
			toRule(){
				uni.navigateTo({
					url:'/pagesA/aboutUs/aboutUs?id=16'
				})
			},
			change(e){
				this.value = e
			},
			open(){
				this.$refs.listVueRef.show(this.info)
			},
			confirm(){
				this.init()
			},
			init() {
				
				this.board = {
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '690rpx',
						height: '844rpx'
					},
					views: [
						//底图
						{
							type: 'image',
							src: this.info.img,
							css: {
								width: '100%',
								height: '100%'
							}
						},
						//二维码
						{
							type: 'image',
							src: this.info.user_QR_code,
							css: {
								width: '105rpx',
								height: '105rpx',
								position: "absolute",
								zIndex: "2",
								right: '35rpx',
								bottom: '45rpx'
							}
						},
						//长按查看我的名片
						// {
						// 	type: "text",
						// 	css: {
						// 		width: "175rpx",
						// 		height: "25rpx",
						// 		position: "absolute",
						// 		zIndex: "2",
						// 		right: "0rpx",
						// 		bottom: "10rpx",
						// 		fontSize: "18rpx",
						// 		textAlign: "center"
						// 	},
						// 	text: '长按查看我的名片'
						// },
						//头像
						{
							type: 'image',
							src: this.info.head,
							css: {
								width: "78rpx",
								height: "78rpx",
								position: "absolute",
								left: "35rpx",
								bottom: "60rpx",
								borderRadius: "50%"
							}
						},
						//姓名
						{
							type: "text",
							css: {
								width: "125rpx",
								height: "25rpx",
								position: "absolute",
								left: "10rpx",
								bottom: "25rpx",
								fontSize: "20rpx",
								textAlign: "center"
							},
							text: this.info.nickname
						},
						//内容
						
						{
								css: {
									width: "360rpx",
									height: "135rpx",
									position: "absolute",
									left: "138rpx",
									bottom: "17rpx",
									// background: "rgba(0,0,0,0.5)",
								},
								views: [
									{
										type: "text",
										css: {
											fontSize: "28rpx",
											// color: "#e4393c",
											lineClamp: 4,
											lineHeight: "35rpx"
										},	
										text: this.value
									},
								],
								type: "view"
						},
					]
				}
			},
			submit(){
				this.$nextTick(() => {
					console.log('this.$refs.painterRef', this.$refs.painterRef, this.board)
					this.$refs.painterRef.canvasToTempFilePathSync({
						fileType: "jpg",
						// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
						pathType: 'url',
						quality: 1,
						success: (res) => {
							console.log(res.tempFilePath);
							// 非H5 保存到相册
							// H5 提示用户长按图另存
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, // 下载后的临时路径
								success: () => {
									uni.showToast({duration:3000,
										title: '下载成功',
										icon: 'none'
									});
								},
								fail: (err) => {
									console.log(err);
									uni.showToast({duration:3000,
										title: '下载失败',
										icon: 'none'
									});
								}
							});
						},
						fail: (err) => {
							console.log('err', err)
				
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}
	.box {
		padding-bottom: 30rpx;
	}

	.hb {
		width: 690rpx;
		height: 844rpx;
		position: relative;
		margin: 0 auto;
		margin-bottom: 20rpx;

		.hb-bg {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.hb-qrCode {
			width: 105rpx;
			height: 105rpx;
			position: absolute;
			right: 35rpx;
			bottom: 45rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.hb-qrCode-tx {
			width: 175rpx;
			height: 25rpx;
			position: absolute;
			right: 0rpx;
			bottom: 10rpx;
			font-size: 18rpx;
			text-align: center;
		}

		.hb-avatar {
			// background: rgba(0, 0, 0, 0.5);
			width: 78rpx;
			height: 78rpx;
			position: absolute;
			left: 35rpx;
			bottom: 60rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.hb-name {
			// background: rgba(0, 0, 0, 0.5);
			width: 125rpx;
			height: 25rpx;
			position: absolute;
			left: 10rpx;
			bottom: 25rpx;
			font-size: 20rpx;
			text-align: center;
		}


		.hb-c {
			//background: rgba(0,0,0,0.5);
			width: 360rpx;
			height: 135rpx;
			position: absolute;
			left: 138rpx;
			bottom: 17rpx;
			font-size: 28rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
			/* 显示的行数 */
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: pre-wrap;
			line-height: 35rpx;
		}
	}


	.form {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;

		.form-title {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #131313;
			margin-bottom: 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #12B475;
			}
		}

		.form-title-y {
			width: 39rpx;
			height: 39rpx;
			background: #FFC000;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			margin-left: 13rpx;
		}

		.form-title-u {
			width: 39rpx;
			height: 39rpx;
			background: #0084FF;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			margin-left: 13rpx;
		}

		.form-input {
			width: 100%;

			&>input {
				width: 690rpx;
				height: 80rpx;
				background: #F0F0F0;
				border-radius: 30rpx;
				box-sizing: border-box;
				padding: 0 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #000;
			}

		}

		.placeholderItem {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
		}

		.upload {
			width: 200rpx;
			height: 140rpx;

			border-radius: 6rpx;

			.upload-item-add {
				background: #F0F0F0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.form-input-c {
			width: 100%;
			display: flex;
			align-items: center;

			.form-input-c-item {
				display: flex;
				align-items: center;
				justify-content: center;

				.form-input-l-label {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 24rpx;
					color: #666666;
					display: flex;
					align-items: center;
					margin-right: 20rpx;
				}
			}
		}

		.radio {
			display: flex;
			flex-wrap: wrap;

			.radio-item {
				height: 53rpx;
				border-radius: 26rpx;
				border: 1px solid #999999;
				padding: 14rpx 48rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}

			.radio-item-ac {
				background: #12B475;
				border-radius: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				border: none;
			}
		}

		.textarea {
			margin-bottom: 30rpx;

			textarea {
				width: 100%;
				height: 160rpx;
				background: #EEEEEE;
				box-sizing: border-box;
				padding: 29rpx 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #000;
			}

			.textarea-ac {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}
		}

		.price {
			.price-input {
				display: flex;
				align-items: center;

				input {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 32rpx;
					color: #FF4B4B;
					width: 321rpx;
					height: 74rpx;
					background: #FFFFFF;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 0 25rpx;
					margin-right: 20rpx;
				}

				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #131313;
			}
		}
	}

	.btns {
		width: 660rpx;
		height: 86rpx;
		background: #12B475;
		border-radius: 43rpx;
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.help {
		width: 750rpx;
		height: 71rpx;
		// background: #FFFFFF;
		box-sizing: border-box;
		padding: 22rpx 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #12B475;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;

		image {
			width: 32rpx;
			height: 33rpx;
			margin-right: 10rpx;
		}
	}

	.painter-img {
		position: fixed;
		top: 0;
		left: 30rpx;
		width: 690rpx;
		z-index: 9999;
	}
	.painter {
		width: 1280rpx;
		height: 1810rpx;
		position: fixed;
		left: -200%;
	}
</style>